<template>
  <view class="filter-row no-grow">
    <wd-drop-menu custom-style="width: 50%">
      <wd-drop-menu-item ref="dropMenu" title="状态" @opened="handleOpened">
        <view class="menu-body flex flex-nowrap justify-between">
          <wd-button
            custom-class="btn inner-btn"
            :round="false"
            :type="!form.status ? 'primary' : 'info'"
            @click="handleStatus('')">全部</wd-button>
          <wd-button
            custom-class="btn inner-btn"
            :round="false"
            :type="form.status === '1' ? 'primary' : 'info'"
            @click="handleStatus('1')">在线</wd-button>
          <wd-button
            custom-class="btn inner-btn"
            :round="false"
            :type="form.status === '2' ? 'primary' : 'info'"
            @click="handleStatus('2')">离线</wd-button>
        </view>
      </wd-drop-menu-item>
      <wd-drop-menu-item ref="dropMenu2" title="方向" @opened="handleOpened">
        <view class="menu-body flex flex-nowrap justify-between">
          <wd-button
            custom-class="btn inner-btn"
            :round="false"
            :type="!form.status ? 'primary' : 'info'"
            @click="handleDirection('')">全部</wd-button>
          <wd-button
            custom-class="btn inner-btn"
            :round="false"
            :type="form.direction === '1' ? 'primary' : 'info'"
            @click="handleDirection('1')">横屏</wd-button>
          <wd-button
            custom-class="btn inner-btn"
            :round="false"
            :type="form.direction === '2' ? 'primary' : 'info'"
            @click="handleDirection('2')">竖屏</wd-button>
        </view>
      </wd-drop-menu-item>
    </wd-drop-menu>
  </view>
</template>

<script lang='ts' setup>
const dropMenu = ref();
const dropMenu2 = ref();
const form = reactive({
  status: "",
  direction: ""
});
function handleOpened() {

}
function handleStatus(value: string) {
  form.status = value;
  dropMenu.value.close();
}
function handleDirection(value: string) {
  form.direction = value;
  dropMenu2.value.close();
}
</script>

<style lang="scss" scoped>
.menu-body {
  width: 100%;
  padding: 16rpx 24rpx 16rpx 24rpx;
  .inner-btn {
  }
}
</style>